@import '../variables';
.dimension {
    padding:20px 10px;

    .h2 {
        font-weight: bold;
        margin-top:30px;
        line-height: 32px;
    }
    .split {
        height:32px;
        line-height: 32px;
        margin:0 8px;
    }

    .sync-data-btn {
        width:227px;
        margin-left:0px;
        margin-top: 100px;
        background:#48535b;
        color:#fff;
        border-radius: 3px;
        height: 32px;
        line-height: 32px;
        padding-left:10px;
        font-size: 14px;
        cursor: pointer;
        .anticon {
            float:right;
            margin:8px 5px 0 0;
        }
    }

    .select-wrap {
        border:1px solid #ddd;
        height:32px;
        line-height: 30px;
        border-radius: 3px;
        padding:0 10px;
        font-size: 14px;
        position: relative;
        cursor: pointer;
        .anticon {
            position: absolute;
            right:10px;
            top:10px;
            color:#ccc;
            font-size: 12px;
        }
    }    
}

.table-chart {
    height:100%;
}
.table-area {
    height:50%;
    padding-top: 64px;
    .toolbar {
        height:64px;
        margin-top: -64px;
    }
    ul {
        margin:0;
        height: 34px;
        padding-top:3px;
        float:left;
        li {
            display: inline-block;
            margin-right:5px;
            margin-left:5px;
            cursor: pointer;
            padding:3px 8px;
            border-radius: 3px;
        }
        li:hover {
            background:#fff;
        }
    }
    .usualy {
        border-left:1px solid #ddd;
        margin-left:10px;
        padding-left:10px;
    }
    .handsontable-container {
        height:100%;
    }
}

.chart-area {
    height:50%;
    .toolbar {
        height:64px;
        background:#f0f3f6;
        padding-left:20px;
        position: relative;
        .ctrl-btn {
            .item {
                float:left;
                width:50px;
                height:46px;
                text-align: center;
                margin-right:10px;
                position: relative;  
                padding-top:24px;
                border-radius: 3px;  
                margin-top:9px; 
                cursor: pointer;   
                .iconfont {
                    font-size:20px;
                    position: absolute;
                    top:50%;
                    left:50%;
                    transform: translate(-50%,-50%);
                    line-height: 46px;
                }
                .name {
                    font-size:12px;
                    line-height: 22px;
                    display: none;
                }
            }
            .wide {
                width:66px;
            }
            .item:hover,.active {
                background:#fff;
                border:1px solid #fff;
                .iconfont {
                    top:20%;
                    left:50%;
                    transform: translate(-50%,-30%);
                }
                .name {
                    display: block;
                }
            }
            .item.disabled {
                cursor: not-allowed;
            }
        }
        .size-btn {
            background:$primary-color;
            color:#fff;
            position: absolute;
            top:0;
            right:0;
            padding:5px 10px;
            border-bottom-left-radius: 8px;
            .iconfont {
                margin:0 3px;
                cursor: pointer;
            }
        }
        .bar-cover {
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
        }
    }
    .chart {
        height:calc(100% - 64px);
        overflow: hidden;
    }
}


.big-chart {
    width:calc(100% - 270px);
    height:100%;
    background:#fff;
    position: absolute;
    top:0;
    right:0;
    z-index: 999;
    padding:15px;

    .toolbar {
        height:65px;
        background:#f0f3f6;
        padding-left:20px;
        position: relative;
        .ctrl-btn {
            .item {
                float:left;
                width:50px;
                height:46px;
                text-align: center;
                margin-right:10px;
                position: relative;  
                padding-top:24px;
                border-radius: 3px;  
                margin-top:9px; 
                cursor: pointer;   
                .iconfont {
                    font-size:20px;
                    position: absolute;
                    top:50%;
                    left:50%;
                    transform: translate(-50%,-50%);
                    line-height: 46px;
                }
                .name {
                    font-size:12px;
                    line-height: 22px;
                    display: none;
                }
            }
            .wide {
                width:66px;
            }
            .item:hover,.active {
                background:#fff;
                border:1px solid #fff;
                .iconfont {
                    top:20%;
                    left:50%;
                    transform: translate(-50%,-30%);
                }
                .name {
                    display: block;
                }
            }
            .item.disabled {
                cursor: not-allowed;
            }
        }
        .size-btn {
            background:$primary-color;
            color:#fff;
            position: absolute;
            top:0;
            right:0;
            padding:5px 10px;
            border-bottom-left-radius: 8px;
            .iconfont {
                margin:0 3px;
                cursor: pointer;
            }
        }
        .bar-cover {
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
        }
    }
    .chart-dims {
        height:44px;
        padding-top:6px;
    }
    .chart {
        height:calc(100% - 110px);
    }
}



